html{
    font-size:100px;
}
 
@fontSize:font-size;
@center:text-align;
@color:color;
header{
    width:100%;
   background:#1448ae;
   padding:15px; 
  }
  .search-black{
       width:70%;
      position:relative;
      margin:0 auto;
       padding:0.3rem;
  }
.search-black i{
     width:40px;
     height:40px;
     display:inline-block;
     position:absolute;
     left:-7%;
     top:50%;
     transform:translate(-50%,-50%);
     background:url("../../images/icon/back.png")0px 0px no-repeat;
     background-size:100% 100%;
 }
.search-black span{
    @{color}:#fff;
    display:inline-block;
    @{fontSize}:0.15rem;
     position:absolute;
     left:50%;
     top:50%;
     transform:translate(-50%,-50%);

}
header a{
   
    width:85%;
    @{color}:#fff;
    margin:0 auto;
    font-size:0.15rem;
    border:1px solid #fff;
    border-radius:30px;
    height:50px; 
    position:relative;  
}
header a i{
    width:50px;
    height:50px;
    display:inline-block;
    margin-left:10px;
   
      background:url("../../images/icon/galss_03.png")7px 8px no-repeat;
}
header a span{
    position:absolute;
    top:50%;
    transform:translate(0,-50%);
    @{fontSize}:0.12rem;
}
section{
    width:100%; 
    // height:1000px;
    max-width:640px;
    margin:0 auto; 
    
}
section .section-left{
    width:20%; 
    height:100%; 
    float:left; 
}

section .divBox{
    width:100%;
    height:180px;
    background:#f4f4f4;
    padding:5px;
    text-align:center;
    padding-top:43px;
    position:relative;
  
}
.divBox .span-bg{
    width:5px;
    height:100%;
    display:inline-block;
    position:absolute;
    left:0;
    top:0;
    background:#f7c612;
    display:none;

}
 header a:hover{
    @{color}:#fff;
}
section .active{
    background:#fff;
   
}
section .divBox,.active .span-bg{
    display:block;
}
 section .divBox p:nth-of-type(2){
     @{color}:#666;
 }
 section .active p:nth-of-type(2){
      @{color}:#1347ac;
 }
.left-icon-1 p:nth-of-type(1){
    width:50px;
    height:50px;
     padding-top:0px;
    background:url("../../images/icon/sprites.png")-457px -103px no-repeat;
    margin:0 auto;

}
.left-icon-1 p:nth-of-type(2){
    margin-top:5px;
    @{fontSize}:0.11rem;

}
// .left-icon-1,.active p:nth-of-type(1){
//     background-position:-456px -181px;
    
// }
.left-icon-1:hover p:nth-of-type(1){
    background-position:-456px -181px;
    
}
.left-icon-1:hover p:nth-of-type(2){
   color:#1347ac;
    
}
 
.left-icon-2 p:nth-of-type(1){
    width:50px;
    height:50px;
     padding-top:0px;
    background:url("../../images/icon/sprites.png")-542px -103px no-repeat;
    margin:0 auto;

}
.left-icon-2 p:nth-of-type(2){
    margin-top:5px;
    @{fontSize}:0.11rem;

}
// .left-icon-2,.active p:nth-of-type(1){
//     background-position:-542px -181px;
   
// }
.left-icon-2:hover p:nth-of-type(1){
     background-position:-542px -181px;
    
}
.left-icon-2:hover p:nth-of-type(2){
    color:#1347ac;
     
 }
.left-icon-3 p:nth-of-type(1){
    width:50px;
    height:50px;
     padding-top:0px;
    background:url("../../images/icon/sprites.png")-627px -103px no-repeat;
    margin:0 auto;

}
.left-icon-3 p:nth-of-type(2){
    margin-top:5px;
    @{fontSize}:0.11rem; 
}
// .left-icon-3,.active p:nth-of-type(1){
//     background-position:-626px -181px; 
// }
.left-icon-3:hover p:nth-of-type(1){
    background-position:-626px -181px; 
}
.left-icon-3:hover p:nth-of-type(2){
    color:#1347ac;
     
 }

/*----------------section-right   ---------------*/
section .section-right{
    width:80%; 
    float:left; 
    height:100%;
    display:flex;
     flex-direction: column;
}
.boxRight{
    width:100%; 
    display:flex;
    flex-direction: row;
    justify-content:  space-around;
}
.imgBox-right{
    width:40%;
    
    border:1px solid #cdcdcd;
    text-align:center;
    line-height:42px;
    margin-top:10px; 
}
section .section-right{
    display:none;
    margin-bottom:0.6rem;
}
  section .show{
    display:block;
  }
 .imgBox-right img{
     width:1rem;
     margin:0 auto;
     margin-top:5px;
 }
 // 旅游首页底部
footer{
    width: 100%;
    height: 0.50rem;
    background: #ededed;
    position: fixed;
    bottom: 0;
    @{fontSize}:0.11rem;
    
    ul{
        width: 100%;
        height:100%;
        display: flex;
        
        li{
            width: 25%;
            height: 100%;
            text-align: center;
            display: flex;
            align-self: center;
            font-weight: bold;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            img{
                margin-top: 0.04rem;
                width: 0.28rem;
                height: 0.26rem;
               
            }
            a{
                font-size: 0.12rem;
                padding-bottom: 0.02rem;
                letter-spacing:0.02rem;
                color: #999999;
            }
        }
        li:nth-of-type(2){
            img{
                width: 0.22rem;
                height: 0.27rem;
            }
            a{
                color: #1448ae;
            }
        }

    }

    
}